<section fxFlexFill #container class="main-container">

  <div fxLayout="row" fxFlexFill class="main-section">
    <div fxFlex="22%" fxLayout="column" fxLayoutAlign="start stretch">
      <div fxFlex="10%" fxLayout="row" class="jl">
        <app-general-overview-panel
          class="general-overview-panel"
          title="装机容量"
          [value]="generalCapacity"
          [capacityCorrection]="capacityCorrection"
          color="yellow" unit="(MW)">
        </app-general-overview-panel>

        <app-general-overview-panel

          class="general-overview-panel"
          title="有功功率"
          [value]="generalPower"
          color="#ffb751"
          unit="(MW)">
        </app-general-overview-panel>

        <app-general-overview-panel
          class="general-overview-panel"
          title="日实时发电量"
          [ratio]="ratio"
          [value]="generalTPowerd"
          color="#ffb9e1"
          unit="(万kWh)">
        </app-general-overview-panel>
      </div>
      <div fxFlex="22%" class="top-margin">
        <app-overview-panel
          class="overview-panel"
          [title]="winFarmCategory?.title"
          [backgroundImg]="winFarmCategory?.backgroundImg"
          [background]="winFarmCategory?.background"
          [color]="winFarmCategory?.color"
          [ratio]="ratio"
          [terms]="winFarmCategory?.terms">
        </app-overview-panel>
      </div>
      <div fxFlex="22%" class="top-margin" *ngIf="pvCategory">
        <app-overview-panel
          class="overview-panel"
          [title]="pvCategory?.title"
          [backgroundImg]="pvCategory?.backgroundImg"
          [background]="pvCategory?.background"
          [color]="pvCategory?.color"
          [ratio]="ratio"
          [terms]="pvCategory?.terms">
        </app-overview-panel>
      </div>
      <app-realtime-power-panel
        fxFlex="50%"
        #realtimePower
        [ratio]="ratio">
      </app-realtime-power-panel>
      <!-- <div fxFlex="35%">
          <app-realtime-power-panel
              #realtimePower
              [ratio]="ratio">
          </app-realtime-power-panel>
      </div> -->
    </div>
    <div fxFlex="60%" fxLayout="column" fxFlex.xs="100%">
      <app-map fxFlex="70%" (changeFarm)="onChangeFarm($event)" [farms]="limitedFarms"></app-map>
      <div fxFlex="30%" fxFlexFill>
        <app-wind-power-panel class="wind-margin" #windPower fxFlex="90%" [currentFarm]="currentLimitedFarm">曲线图
        </app-wind-power-panel>
        <!-- <app-turboper-panel class="main-turbOper"  #turbOper
            fxFlex="40%"
            title="风机检修"
            [maxValue]="max"
            [totalTurboperDatas]="totalTurboperDatas"
            [turboperTable]="turboperTable">
        </app-turboper-panel> -->
      </div>
    </div>
    <div fxFlex="18%" fxLayout="column" class="main-right">
      <app-farm-overview-panel
        fxFlex="26%"
        class="farm-overview-panel"
        [currentFarm]="currentLimitedFarm"
      >
      </app-farm-overview-panel>
      <div fxFlex="30%" class="zIndex" fxLayout="column">
        <div class="plan-power-title" (dblclick)="ondblclick($event)">
                    <span class="iw dis_inlb">
                        <i class="icon icon-elec"></i>
                        发电量概览
                    </span>
          <s></s>
        </div>
        <app-plan-power-panel
          fxFlex="30%"
          #dayPlan
          class="plan-power-content"
          [ratio]="ratio"
          [plantData]="dayPlantData"
          [plantTitel]="'日实时发电量'"
          [plantUnit]="'万kWh'"
          [plantColor]="'#37cafa'">
        </app-plan-power-panel>
        <app-plan-power-panel
          fxFlex="30%"
          #monthPlan
          class="plan-power-content"
          [ratio]="ratio"
          [plantData]="monthPlantData"
          [plantTitel]="'月累计发电量'"
          [plantUnit]="'万kWh'"
          [plantColor]="'#55c45b'">
        </app-plan-power-panel>
        <app-plan-power-panel
          fxFlex="30%"
          #yearPlan
          class="plan-power-content"
          [ratio]="ratio"
          [plantData]="yearPlantData"
          [plantTitel]="'年累计发电量'"
          [plantUnit]="'万kWh'"
          [plantColor]="'#ADFF2F'">
        </app-plan-power-panel>
      </div>
      <div fxFlex="44%" fxLayout="column">
        <app-turbstatus-panel fxFlex="100%" #turbStatus
                              title="风机状态"
                              [totalTurbstatusDatas]="totalTurbstatusDatas"
                              [turbstatusTable]="turbstatusTable">
        </app-turbstatus-panel>
        <app-turbstatus-panel *ngIf="invertersTable?.rows.length" fxFlex="100%" #turbStatus
                              title="逆变器状态"
                              [totalTurbstatusDatas]="totalInverterDatas"
                              [turbstatusTable]="invertersTable">
        </app-turbstatus-panel>
      </div>
    </div>
  </div>
</section>
